<div class="style-js id-<?= $id ?>">style js</div>

<div class="dynamic <?php if($id==1001): ?>dynamic-selector<?php endif; ?>">dynamic selector</div>
<div class="dynamic<?php if($id==1001): ?> dynamic-selector<?php endif; ?>">dynamic selector</div>
<div class="dynamic <?php if($id==100): ?>dynamic-selector<?php endif; ?>">dynamic selector</div>
<div
  class="dynamic<?php if($id==100): ?> dynamic-selector<?php endif; ?> ooo<?php if($id==100): ?> dynamic-selector2<?php endif; ?>">
  dynamic selector</div>

<script src="./index.ts"></script>

<!-- <script>
  console.log('js content')
</script> -->

<!-- <style src="./index.scss"></style> -->

<!-- <style to="file">
  .style-js {
    padding-left: 20px;
    font-size: 40px;
    color: red;
  }
</style> -->

<!-- <style>
  .style-js {
    background: <?= $color ?>;
  }
</style> -->

<style>
  .id-<?= $id ?> {
    color: #000;
  }

  .dynamic {
    padding: 10px;
    background: aquamarine;
  }

  .dynamic-selector {
    font-size: 30px;
  }
</style>

<!-- <style>
  .style-js {
    border: 1px solid #000;
    animation: both 0.3s both;
  }

  @keyframes both {
    0% {
      opacity: 0;
      transform: translateY(2000px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style> -->
